<template lang="">
  <div class="home_container">
    <el-container>
    <el-header>
      <div class="title">
        <img src="@/assets/logo.png" alt="">
        <span>电商后台管理系统</span>
      </div>
      <el-button type="info" @click="logout">退出</el-button>
    </el-header>
    <el-container>
      <el-aside :width="isCollapse?'60px':'200px'">
        <!-- 左侧菜单 -->
        <el-menu
          router
          :collapse-transition="false"
          :collapse="isCollapse"
          background-color="#333744"
          text-color="#fff"
          active-text-color="#409fff"
          unique-opened
          :default-active="activePath">
          <div class="menuTop" @click="toggleMenu">|||</div>
          <!-- 第一层循环 -->
          <el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
              <template slot="title">
                <i :class="icon[item.id]"></i>
                <span style="margin-left:10px;">{{item.authName}}</span>
              </template>

              <!-- 第二层循环 -->
              <el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="subItem.id">
                <i :class="icon[subItem.id]"></i>
                <span style="margin-left:10px;">{{subItem.authName}}</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>

      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
    
  </div>
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
      menuList: [],
      isCollapse: false,
      icon: {
        125: "iconfont icon-users",
        103: "iconfont icon-tijikongjian",
        101: "iconfont icon-shangpin",
        102: "iconfont icon-danju",
        145: "iconfont icon-baobiao",
        110: "iconfont icon-user-fill",
        111: "iconfont icon-danju",
        112: "iconfont icon-quanxian",
        104: "iconfont icon-shangpin",
        115: "iconfont icon-fenlei",
        121: "iconfont icon-xingxing",
        107: "iconfont icon-fasong",
        146: "iconfont icon-baobiao",

      }
    }
  },
  computed: {
    activePath() {
      return this.$route.meta.parentPath ? this.$route.meta.parentPath : this.$route.path
    }
  },
  async created() {
    console.log(this.$route)
    //获取左侧菜单
    let { data: res } = await this.$axios({ url: "menus" }).catch(err => err)
    if (res.meta.status !== 200) return this.$message.error("菜单数据请求错误")
    this.menuList = res.data;
  },
  methods: {
    //退出登录
    logout() {
      sessionStorage.clear()
      this.$router.push("/login")
    },
    //菜单展开与合并
    toggleMenu() {
      this.isCollapse = !this.isCollapse
    }


  }

}
</script>
<style lang="less" scoped>
.el-menu {
  border-right: 1px solid #292c36;
}

//菜单展开与合并
.menuTop {
  background: #292c36;
  color: white;
  text-align: center;
  letter-spacing: 3px;
  cursor: pointer;
}

.home_container {
  height: 100%;
}

.el-container {
  height: 100%;
}

.el-header {
  background: #373f41;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  color: white;
  display: flex;
  align-items: center;

  img {
    width: 40px;
    height: 40px;
    margin-right: 20px;
  }
}

.el-aside {
  background: #333744;
  height: 100%;
}
</style>